<template>
    <div class="cart">
        <van-nav-bar :title="title" left-text="" left-arrow @click-left="goback" />
        <div class="wrapper">
            <div v-show="isLogin">
                <SinCartVue :cartList="cartList" @goToAdd="stepHandler" @goToDel="delHandler">
                    <template #actBar>
                        <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
                            <van-checkbox v-model="isChecked" checked-color="#ee0a24">
                                全选
                            </van-checkbox>
                        </van-submit-bar>
                    </template>
                </SinCartVue>
            </div>
            <van-empty image="search" description="请先登录" v-show="!isLogin" />
        </div>
        <DockerVue :navActive="navActive"></DockerVue>
    </div>
</template>

<script>
export default {
    name: 'cart',
};
</script>

<script setup>
import SinCartVue from './components/SinCart.vue';
import DockerVue from '@/components/Docker.vue';
import { ref, reactive, computed } from 'vue';
import { useStore } from 'vuex';
import { requestGet, requestPost, requestDel } from '@/utils/Request';
import router from '@/router';
const navActive = ref(1);
const store = useStore();
const isLogin = computed(() => store.state.user.isLogin);
const token = store.state.user.token;
let cartList = ref([]);
let title = ref('我的全部购物车(0)');
let getCartList = async (token, cartList) => {
    const res = await requestGet('/shoppingCart?project_id=238', token);
    res.data.result.forEach(ele => {
        ele['checked'] = true;
    });
    cartList.value = res.data.result;
    console.log(cartList.value);
    title.value = `我的全部购物车(${cartList.value.length})`;
};
if (token) {
    getCartList(token, cartList, title);
}

let isChecked = computed({
    get: function () {
        return cartList.value.every(ele => ele.checked);
    },
    set: function (value) {
        cartList.value.forEach(ele => {
            ele.checked = value;
        });
    },
});
let total = computed({
    get: function () {
        cartList.value.forEach(ele => {
            let price = ele.s_good.sale_price || ele.s_good.price;
            ele['total_price'] = ele.num * 100 * price;
        });
        const total = cartList.value.reduce(
            (sum, ele) => (ele.checked ? sum + ele.total_price : sum),
            0
        );
        return total || 0;
    },
});
const onSubmit = () => {
    const newOrder = cartList.value.filter(ele => ele.checked);
    store.commit('cart/sendOrder', newOrder);
    router.push('/pay');
};
const stepHandler = value => {
    let item = cartList.value.find(ele => ele.id === value.id);
    item.num = value.num;
};
const delHandler = async value => {
    let res = await requestDel(`/shoppingCart/${value.id}`, token);
    console.log(res);
    getCartList(token, cartList, title);
};
const goback = () => {
    store.commit('changeRouterType', 'back');
    router.back();
};
</script>

<style lang="scss" scoped>
.wrapper {
    position: absolute;
    top: 0.44rem;
    left: 0;
    right: 0;
    bottom: 1rem;
    background-color: #f1f1f1;
    overflow-y: scroll;
}
.van-submit-bar {
    bottom: 0.5rem;
}
</style>
